Text Containers
Elements on this page provide you with a complete set of typography container styles that can be used to highlight specific elements on your page and provide an additional level of visual hierarchy.
Containers with a border within the same row will automatically be set to have the same height as the tallest container in the row.
This section requires the following: External:
- jQuery 2.2.2
- Hind and Roboto Google Fonts
- bootstrap CSS
- bootstrap JS
Internal:
- IMF_Text_Image_Containers.css
- IMF_Typography.css
- IMF_Text_Containers.js
Full Width One Column Text Container
Content Header H1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh.
Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. Etiam ultrices. Suspendisse in justo eu magna luctus suscipit. Sed lectus. Integer euismod lacus luctus magna. more
Two Column Text Containers (Standard Columns)
Content Header H2
Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet. more
Content Header H2
Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet. more
Two Column Text Containers (Offset Columns v1)
Content Header H2
Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet. more
Content Header H3
Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet. more
Two Column Text Containers (Offset Columns v2)
Content Header H2
Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet. more
Content Header H4
Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet. more
Three Column Text
Content Header H3
Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet. more
Content Header H3
Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet. more
Content Header H3
Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet. more
Three Column Text (Offset Columns)
Content Header H3
Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet. more
Content Header H4
Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet. more
Content Header H4
Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet. more
Four Column Text
Content Header H4
Quarter width columns (ex. using "col-sm-3") or narrower will always use H4 styles regardless of the heading tag level used, so the heading font size isn't disproportionately large. more
Content Header H4
Quarter width columns (ex. using "col-sm-3") or narrower will always use H4 styles regardless of the heading tag level used, so the heading font size isn't disproportionately large. more
Content Header H4
Quarter width columns (ex. using "col-sm-3") or narrower will always use H4 styles regardless of the heading tag level used, so the heading font size isn't disproportionately large. more
Content Header H4
Quarter width columns (ex. using "col-sm-3") or narrower will always use H4 styles regardless of the heading tag level used, so the heading font size isn't disproportionately large.